<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位实现</title>
    <style>
        .box {
            background-color: lightgreen;
            width: 500px;
        }
        .little-box {
            position: relative;
            top: 20px;
            left: 20px;
            background-color: lightcyan;
            width: 200px;
            height: 200px;
        }

        .ab {
            position: absolute;
            background-color: hotpink;
            /*可以在某一个容器里设置它的位置，它完全脱离文档流的*/
            /**
                最主要的就是确定定位容器
                    一直往上级找，直到上一个有定位的容器，之后就在这个容器中进行定位
                    如果一直没有找到，就会相对于body进行定位
                 往往会给他的父容器设置一个相对定位，然后子容器使用绝对定位

                 子绝父相
             */
            /*top: 20px;*/
            /*left: 100px;*/
            bottom: 0;
            right: 0;
        }

        .guding {
            /*相对于屏幕定位*/
            position: fixed;
            right: 0;
            top: 40%;
            background-color: lavenderblush;
        }

        .box2 {
            height: 300px;
            width: 500px;
            position: relative;
            background-color: lightcyan;
        }

        .img1 {
            position: absolute;
            top: 10px;
            left: 20px;
            z-index: 10;
        }

        .img2 {
            position: absolute;
            top: 30px;
            left: 50px;
            z-index: 5;
        }

    </style>
</head>
<body>
1. 静态定位 ，设置定位的时候通过position属性进行设置的， static定位，
2. 相对定位。设置position为relative的时候，代表相对定位。可以相对于之前的位置进行定位
<div class="box">
    <div class="little-box">
        这是一个内部的盒子
        <div class="ab">
            绝对定位
        </div>
    </div>
    后面的内容

</div>
<div>
    尾部
</div>

<div class="guding">固定定位</div>

<div class="box2">
    <img class="img1" src="img1.jpg" alt="图1" width="100px">
    <img class="img2" src="img/img2.jpg" alt="图2" width="100px">
</div>

</body>
</html>